<!--
 * @Author: your name
 * @Date: 2020-10-13 09:11:50
 * @LastEditTime: 2020-10-14 14:45:43
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \nuxt-iview\components\Navbar.vue
-->
<template>
  <div class="NavbarWapper">
    <Row type="flex" class-name="NavbarWapper_row">
      <Col span="4">
        <nuxt-link to="/" class="NavbarWapper_logo">
          <img class="img" src="http://www.eyecedar.com/media/logo/default/shoose5-2-__04.jpg" alt="">
        </nuxt-link>
      </Col>
      <Col span="14">
        <ul class="NavbarWapper_title">
          <li class="li"><nuxt-link class="li_link" to="/">Eyeglasses</nuxt-link></li>
          <li class="li"><nuxt-link class="li_link" to="/">Sunglasses</nuxt-link></li>
          <li class="li"><nuxt-link class="li_link" to="/">Accessories</nuxt-link></li>
          <li class="li"><nuxt-link class="li_link" to="/">Explore</nuxt-link></li>
          <li class="li"><nuxt-link class="li_link" to="/">Deals</nuxt-link></li>
          <li class="li"><nuxt-link class="li_link" to="/">About</nuxt-link></li>
        </ul>
      </Col>
      <Col span="6">
          <ul class="NavbarWapper_right">
            <li class="li">
              <!-- <img src="" alt=""> -->
              <Icon type="md-search" />
            </li>
            <li class="li">
              <Icon type="md-heart-outline" />
            </li>
            <li class="li">
              <Icon type="md-cart" />
            </li>
            <li class="li">
              <nuxt-link to="/" class="sign">Sign</nuxt-link>
            </li>
            <li class="li">
              <nuxt-link to="/" class="help">Help</nuxt-link>
            </li>
          </ul>
      </Col>
    </Row>
  </div>
</template>

<script>
export default {
  name: '',
  data(){
    return {

    }
  },
}
</script>
<style lang="scss" scoped>
@import '~/assets/scss/index.scss';

.NavbarWapper_row {
  max-width:1200px;
  margin:0 auto;
  height: 90px;
  background: #fff;
}
.NavbarWapper_logo {
  @include flex-center(center);
  height: $s100;
  .img {
    width: $s100;
  }
}
.NavbarWapper_title {
  @include flex-center();
  height: $s100;
  .li {
    @include flex-center();
    font-size: 16px;
    font-weight: bold;
    flex-grow: 1;
    height: $s100;
    &_link {
      @include flex-center();
      height: $s100;
    }
  }
}
.NavbarWapper_right {
  @include flex-center();
  height: $s100;
  .help,
  .sign {
    font-size: 16px;
    font-weight: bold;
    color: $c333;
  }
}
</style>